<template>
  <ul class="container">
    <router-link to="bounceScroll">
      <li>scroll<span class="arrow-right"></span></li>
    </router-link>
    <router-link to="infiniteScroll">
      <li>无限加载<span class="arrow-right"></span></li>
    </router-link>
    <router-link to="pullToRefresh">
      <li>下拉刷新<span class="arrow-right"></span></li>
    </router-link>
    <router-link to="pullToLoadMore">
      <li>上拉加载<span class="arrow-right"></span></li>
    </router-link>
  </ul>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  li {
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    color: #666;
    padding: 0 14px;
    border-bottom: 1px solid #f4f4f4;
    .arrow-right {
      float: right;
      width: 8px;
      height: 8px;
      border-top: 1px solid #999;
      border-right: 1px solid #999;
      transform: rotate(45deg);
      margin-top: 16px;
    }
  }
}
</style>
